<!DOCTYPE html>
<html lang="en">
<?php
session_start();
if (!isset($_SESSION['userid'])) {
    echo "<script>alert('请先登录！');window.location.href='login.php';</script>";
}
?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
</head>
<style>
    body {
        background-color: #f8f9fa;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .header {

        position: sticky;
        height: 70px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        top: 0px;
        background-color: #fff;
        box-shadow: #ccc 0px 5px 20px 0px;
        z-index: 999;

        &>.logo {
            list-style: none;
            width: 200px;

            & .logo {
                width: 200px;
            }
        }

        &>.options {
            display: flex;
            list-style: none;

            & li {
                margin-right: 20px;
                padding: 10px;
                border-radius: 5px;
                font-size: 20px;
                color: #0327b3;
                cursor: pointer;

                &:hover {
                    color: #fff;
                    background-color: #2A4DD0;
                }

                &>a {
                    color: inherit;
                    text-decoration: none;
                }
            }
        }

        &>.login {
            width: 200px;
        }
    }

    .li-user {
        max-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* 新增，作为绝对定位参照 */

        &>.image-box {
            display: flex;
            justify-content: center;
            align-items: center;

            &>.user-image {
                max-width: 70px;
                max-height: 30px;
            }
        }

        &>.username {
            margin: 0 5px;
            max-width: 100px;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }
    }

    /* 退出登录按钮样式开始 */
    .logout {
        width: 100%;
        position: absolute;
        top: 0px;
    }

    .logout button {
        width: 100%;
        height: 50px;
        background: red;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.5s ease;
        display: none;
        margin-top: 0;
        /* 修改为0，去掉负margin */
        float: none;
        /* 去掉float */
    }

    .logout button a {
        text-decoration: none;
        color: #fff;
        font-size: 16px;
    }

    .li-user:hover .logout button {
        width: 100%;
        display: inline-block;
        /* 改为inline-block更合适 */
    }

    /* 退出登录按钮样式结束 */
    .main {
        display: flex;
        width: 70%;
        margin: 10px auto;

        &>* {
            margin: 10px;
        }

        &>.user_info {
            padding: 10px;
            flex: 4;
            display: flex;
            flex-direction: column;
            background-color: white;
            border-radius: 20px;

            &>* {
                display: flex;
                margin: 10px;
            }

            &>img {
                max-width: 600px;
                width: 95%;
                margin: 10px auto;
            }

            & .reg_time {
                color: #818181;
            }

            &>button {
                width: 90%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
                border-radius: 10px;
                cursor: pointer;
                color: white;
                margin: 10px auto;
            }

            &>.edit_btn {
                background-color: rgb(1, 43, 210);

                &:hover {
                    background-color: rgb(0, 0, 159);
                }
            }

            &>.quit_btn {
                background-color: #ff0000;

                &:hover {
                    background-color: rgb(200, 0, 0);
                }
            }
        }

        &>.post_list {
            max-height: 800px;
            padding: 10px;
            flex: 6;
            display: flex;
            flex-direction: column;
            background-color: rgb(255, 255, 255);
            border-radius: 20px;
            overflow: auto;


            &>.post {
                border: 1px solid #eee;
                border-radius: 10px;
                margin: 10px 0;
                padding: 10px 10px 5px 15px;
                cursor: pointer;
                transition: all 0.2s;
                color: #666;

                &>* {
                    margin: 10px 0;
                }

                &>.board_time {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    &>p {
                        border: 1px solid #f3da23;
                        background-color: #fdf6c4;
                        color: #2A4DD0;
                        font-weight: bold;
                        padding: 4px 8px;
                        border-radius: 4px;
                        font-size: 14px;
                        position: relative;
                        left: -5px;
                    }

                    &>div {
                        display: flex;
                        align-items: center;

                        &>span {
                            margin-left: 5px;
                        }
                    }
                }

                &>.title>h3 {
                    width: 400px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: black;
                }

                &>.content {

                    &>span {
                        display: -webkit-box;
                        /* 旧版弹性盒模型 */
                        -webkit-box-orient: vertical;
                        /* 文本垂直排列 */
                        -webkit-line-clamp: 3;
                        /* 显示3行 */
                        overflow: hidden;
                        /* 隐藏溢出内容 */
                        text-overflow: ellipsis;
                        /* 文本溢出时显示省略号 */
                        line-height: 1.5;
                        /* 行高（可选） */
                        max-height: calc(1.5em * 3);
                        /* 最大高度 = 行高 × 行数（备用方案）*/
                    }


                }

                &>.like {
                    display: flex;
                    align-items: center;

                    &>span {
                        margin-right: 5px;
                    }

                    &>.editAndDelete {
                        margin-left: auto;

                        &>button {
                            margin-right: 5px;
                            border: none;
                            border-radius: 5px;
                            padding: 5px;
                            cursor: pointer;
                            color: white;
                        }

                        &>button.edit_post {
                            background-color: green;
                        }

                        &>button.delete_post {
                            background-color: red;

                        }
                    }
                }

                &:hover {
                    border-color: #ddd;
                    background: #fcfcfc;
                    transform: translateY(-3px);
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);

                }
            }
        }
    }

    /* 模态框· */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        width: 90%;
        max-width: 500px;
        animation: modalFade 0.3s ease-out;
    }

    @keyframes modalFade {
        from {
            opacity: 0;
            transform: translateY(-30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .modal-header {
        padding: 20px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modal-title {
        font-size: 20px;
        font-weight: 600;
        color: #222;
    }

    .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #999;
        transition: color 0.2s;
    }

    .close-btn:hover {
        color: #333;
    }

    .modal-body {
        padding: 20px;
        max-height: 70vh;
        overflow-y: auto;
    }

    .edit-form .form-group {
        margin-bottom: 20px;
    }

    .edit-form label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #444;
        font-size: 15px;
    }

    .edit-form input,
    .edit-form select,
    .edit-form textarea {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 15px;
        background: #f9f9f9;
    }

    .edit-form input:focus,
    .edit-form select:focus,
    .edit-form textarea:focus {
        outline: none;
        border-color: #4a6cf7;
        background: white;
    }

    .btn-group {
        display: flex;
        gap: 15px;
        margin-top: 10px;
    }

    .btn {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s;
        font-weight: 500;
    }

    .btn-primary {
        background: #4a6cf7;
        color: white;
    }

    .btn-primary:hover {
        background: #3a5ae0;
    }

    .btn-outline {
        background: transparent;
        border: 1px solid #ddd;
        color: #666;
    }

    .btn-outline:hover {
        background: #f9f9f9;
    }

    .gender-options {
        display: flex;
        gap: 12px;
    }

    .gender-option {
        flex: 1;
        text-align: center;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        background: #f9f9f9;
    }

    .gender-option:hover {
        border-color: #bbb;
        background: #f1f1f1;
    }

    .gender-option.active {
        border-color: #4a6cf7;
        background: #eef2ff;
    }

    .avatar-upload {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .avatar-preview {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px dashed #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
    }

    .avatar-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .upload-info {
        flex: 1;
    }

    .edit_post_mubu {
        display: none;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;

        &>.eidt_post_div {
            padding: 20px;
            width: 500px;
            min-height: 500px;
            background-color: white;
            display: flex;
            border-radius: 20px;
            flex-direction: column;
            &>h2{
                margin-bottom: 20px;
            }
            &>form {
                width: 100%;

                &>* {
                    margin: 20px 0;
                }

                & input {
                    width: 100%;
                    margin: 10px 0;
                    padding: 12px 15px;
                    border-radius: 10px;
                }

                & textarea {
                    width: 100%;
                    height: 200px;
                    margin: 10px 0;
                    padding: 12px 15px;
                    border-radius: 10px;
                }
                &>input{
                    border: none;
                    border-radius: 5px;
                    height: 50px;
                    cursor: pointer;
                    transition: all 0.2s;
                    &:hover{
                        transform: translateY(-5px);
                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
                    }
                }
                &>input[type="submit"] {
                    background-color: #0327b3;
                    color: white;
                }
            }
        }
    }
</style>

<body>
    <div class="header">
        <ul class="logo">
            <li>
                <img src="../image/logo.png" alt="" class="logo">
            </li>
        </ul>
        <ul class="options">
            <li><a href="./">论坛首页</a></li>
            <li><a href="./list.php">板块</a></li>
            <li><a href="./me">我的信息</a></li>
            <li class="li-user">
                <div class='image-box'>
                    <img src="<?php
                    if (isset($_SESSION['head'])) {
                        echo '../image/head/' . $_SESSION['head'];
                    } else {
                        echo '../image/head/Default1.jpg';
                    }
                    ?>" alt="user" class='user-image'
                        onerror='this.onerror=null; this.src="../image/head/Default.jpg";'>
                </div>
                <?php
                if (isset($_SESSION['username'])) {
                    echo "<a>" . $_SESSION['username'] . "</a>";
                    echo <<<EOF
                    <div class="logout">
                    <button><a onclick="confirm('确认退出登录吗？')?href='../control/doLogin.php?action=logout':''">退出登录</a></button>
                </div>
EOF;
                } else {
                    echo "<a href='login.php'>登录</a>";
                }
                ?>

            </li>
        </ul>

    </div>
    <div class="main">
        <div class="user_info">
            <?php
            require '../model/userDao.php';
            $userId = isset($_GET['userId']) ? $_GET['userId'] : $_SESSION['userid'];
            $user = select_userinfo_by_uid($userId);
            $head = $user[0]['head'];
            $username = $user[0]['uName'];
            $password = $user[0]['uPass'];
            $gender = $user[0]['gender'];
            $time = $user[0]['regTime'];
            $topicNumber = $user[0]['topicNumber'];
            $editAndDelete = "";
            echo <<<EOF
                <img src="../image/head/$head" alt="user" class='user-image'" alt="" class="user_image" onerror='this.onerror=null; this.src="../image/head/Default.jpg";'>
            <h3>$username</h3>
EOF;
            if ($gender == 1) {
                echo <<<EOF
    <div class="gender">
                <svg t="1748870547198" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2832" width="20" height="20">
                    <path
                        d="M394.927119 361.941356c-65.98176 0-128.025838 25.692149-174.679391 72.346725-96.296183 96.311533-96.296183 253.015527 0.01535 349.310687 46.653553 46.654576 108.682281 72.332399 174.647669 72.332399 65.965387 0 127.994116-25.693172 174.664042-72.346725 96.29516-96.296183 96.29516-252.984828 0-349.295338C522.936585 387.634528 460.90888 361.941356 394.927119 361.941356zM535.774985 749.783615c-37.627992 37.627992-87.658456 58.341756-140.863215 58.341756-53.204759 0-103.220896-20.712741-140.847865-58.325383-77.667917-77.667917-77.667917-204.043163-0.016373-281.712103 37.627992-37.619806 87.659479-58.33971 140.879588-58.33971 53.204759 0 103.219873 20.719904 140.847865 58.33971C613.427552 545.755802 613.427552 672.131047 535.774985 749.783615z"
                        p-id="2833" fill="#1296db"></path>
                    <path
                        d="M868.171444 135.676076c-4.482081-4.481058-10.565636-7.002484-16.899902-7.002484l-329.066621 0.01535c-13.196557 0-23.902386 10.706853-23.902386 23.902386 0 13.20372 10.706853 23.902386 23.902386 23.902386l305.164235-0.016373 0 305.179584c0 13.204743 10.705829 23.902386 23.902386 23.902386 13.196557 0 23.902386-10.698666 23.902386-23.902386L875.173928 152.575977C875.174951 146.234549 872.653525 140.158157 868.171444 135.676076z"
                        p-id="2834" fill="#1296db"></path>
                </svg>
                <span>男</span>
            </div>
EOF;
            } else {
                echo <<<EOF
<div class="gender">
                <svg t="1748870503845" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2647" width="20" height="20">
                    <path
                        d="M519.658935 673.068396c81.129762 0 157.397796-31.572066 214.762295-88.937588 118.423133-118.421087 118.423133-311.085084 0-429.507194C677.057755 97.259114 600.788697 65.668629 519.658935 65.668629c-81.128739 0-157.39882 31.590486-214.744899 88.954985-118.402667 118.42211-118.402667 311.086108 0 429.507194C362.279558 641.496329 438.548616 673.068396 519.658935 673.068396zM346.474594 196.183148c46.267766-46.266743 107.764376-71.734788 173.184341-71.734788 65.419965 0 126.937041 25.468045 173.203784 71.734788 95.499028 95.500051 95.499028 250.889097 0 346.389148-46.266743 46.245254-107.765399 71.713298-173.203784 71.713298-65.420989 0-126.916575-25.468045-173.184341-71.713298C250.995009 447.072245 250.995009 291.682175 346.474594 196.183148z"
                        p-id="2648" fill="#d4237a"></path>
                    <path
                        d="M793.986861 800.462854 549.061592 800.462854l0.008186-71.2743c0-16.22452-13.164834-29.389354-29.391401-29.389354s-29.389354 13.163811-29.389354 29.389354l-0.007163 71.2743L245.349429 800.462854c-16.225543 0-29.389354 13.163811-29.389354 29.390377s13.163811 29.392424 29.389354 29.392424l244.925269 0-0.00614 71.236438c0 16.22452 13.163811 29.389354 29.390377 29.389354s29.391401-13.163811 29.391401-29.389354l0.007163-71.236438L793.986861 859.245655c16.225543 0 29.391401-13.165858 29.391401-29.392424S810.213427 800.462854 793.986861 800.462854z"
                        p-id="2649" fill="#d4237a"></path>
                </svg>
                <span>女</span>
                
            </div>
EOF;
            }
            echo <<<EOF
            
            <div class="time">
                <svg t="1748870643949" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3886" width="20" height="20">
                    <path
                        d="M725.333333 170.666667h74.709334C864.853333 170.666667 917.333333 223.189333 917.333333 288.096V799.893333C917.333333 864.757333 864.832 917.333333 800.042667 917.333333H223.957333C159.146667 917.333333 106.666667 864.810667 106.666667 799.904V288.106667C106.666667 223.242667 159.168 170.666667 223.957333 170.666667H298.666667v-32a32 32 0 0 1 64 0v32h298.666666v-32a32 32 0 0 1 64 0v32z m0 64v32a32 32 0 0 1-64 0v-32H362.666667v32a32 32 0 0 1-64 0v-32h-74.709334A53.354667 53.354667 0 0 0 170.666667 288.096V799.893333A53.301333 53.301333 0 0 0 223.957333 853.333333h576.085334A53.354667 53.354667 0 0 0 853.333333 799.904V288.106667A53.301333 53.301333 0 0 0 800.042667 234.666667H725.333333z m-10.666666 224a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h405.333334zM586.666667 618.666667a32 32 0 0 1 0 64H309.333333a32 32 0 0 1 0-64h277.333334z"
                        fill="#1296db" p-id="3887"></path>
                </svg>
                <span>注册时间：<span class="reg_time">$time</span></span>
            </div>
            <div class="post_number">
                <svg t="1748870999844" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4927" width="20" height="20">
                    <path
                        d="M288 416h192c17.67 0 32-14.33 32-32s-14.33-32-32-32H288c-17.67 0-32 14.33-32 32s14.33 32 32 32zM288 576h352c17.69 0 32-14.31 32-32s-14.31-32-32-32H288c-17.67 0-32 14.31-32 32s14.33 32 32 32zM480 672H288c-17.67 0-32 14.31-32 32s14.33 32 32 32h192c17.67 0 32-14.31 32-32s-14.33-32-32-32zM939.98 645.16L826.84 532.02c-6.25-6.25-14.44-9.37-22.63-9.37s-16.38 3.12-22.63 9.37L553.37 760.24c-6 6-9.37 14.14-9.37 22.63V896c0 17.67 14.33 32 32 32h113.14c8.49 0 16.63-3.37 22.63-9.37l228.21-228.21c12.49-12.5 12.49-32.76 0-45.26zM675.88 864H608v-67.88L804.21 599.9l67.88 67.88L675.88 864z"
                        fill="#1296db" p-id="4928"></path>
                    <path
                        d="M448 864H192V160h383.86l0.11 128.09c0.06 35.23 28.78 63.91 64 63.91H768v80c0 17.67 14.33 32 32 32s32-14.33 32-32V274.87c0-8.58-3.45-16.8-9.56-22.82L673.09 105.18A32.002 32.002 0 0 0 650.66 96H160c-17.67 0-32 14.33-32 32v768c0 17.67 14.33 32 32 32h288c17.67 0 32-14.33 32-32s-14.33-32-32-32z m319.72-576H639.97l-0.1-125.73L767.72 288z"
                        fill="#1296db" p-id="4929"></path>
                </svg>
                <span>已发布 $topicNumber 篇文章</span>
            </div>
            
EOF;
            if (!isset($_GET['userId'])) {

                echo <<<EOF
    <button class="edit_btn">
                <svg t="1748875019318" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6038" width="20" height="20">
                    <path
                        d="M474.58679343 587.16868738c-11.45302241 0-22.90604486-4.37057868-31.6472022-13.11173601-17.48231469-17.48231469-17.48231469-45.83841849 0-63.29440437l487.24053555-487.24053552c17.48231469-17.48231469 45.81208967-17.48231469 63.29440431 0 17.48231469 17.48231469 17.48231469 45.83841849 0 63.29440441L506.23399561 574.05695137a44.61676276 44.61676276 0 0 1-31.64720218 13.11173601z"
                        fill="#ffffff" p-id="6039"></path>
                    <path
                        d="M904.16728498 1017.19676833h-781.96497912c-62.68884228 0-113.68770304-50.99886074-113.68770305-113.71403181v-781.96497913c0-62.71517108 50.99886074-113.71403182 113.66137425-113.71403185l457.51533479 0.0263288c24.72273117 0 44.75893818 20.03620706 44.75893819 44.7589382s-20.03620706 44.75893818-44.75893819 44.7589382l-457.51533479-0.02632877c-13.2960375 0-24.14349786 10.84746035-24.14349785 24.16982661v781.96497915c0 13.32236631 10.84746035 24.1698266 24.16982665 24.16982664h781.96497912c13.32236631 0 24.1698266-10.84746035 24.16982668-24.16982664V403.42008173c0-24.72273117 20.06253583-44.75893818 44.75893815-44.75893828 24.72273117 0 44.75893818 20.03620706 44.7589382 44.75893828V903.50906532c0 62.68884228-50.99886074 113.68770304-113.68770303 113.68770301z"
                        fill="#ffffff" p-id="6040"></path>
                </svg>
                &nbsp;编辑信息</button>
            <button class="quit_btn">
                <svg t="1748875130387" class="icon" viewBox="0 0 1042 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="7078" width="20" height="20">
                    <path
                        d="M581.632 697.344l126.976 0 0 194.56q0 33.792-10.24 58.88t-27.136 40.96-39.424 23.552-48.128 7.68l-452.608 0q-24.576 0-48.128-9.728t-41.472-27.136-29.184-40.96-11.264-52.224l0-706.56q0-24.576 11.776-47.104t30.208-39.936 40.96-28.16 45.056-10.752l449.536 0q26.624 0 50.176 11.776t41.472 29.696 28.16 40.448 10.24 44.032l0 188.416-126.976 0 1.024-195.584-452.608 0-1.024 713.728 452.608 0 0-195.584zM1021.952 505.856q37.888 30.72 2.048 60.416-20.48 15.36-44.544 37.888t-50.176 46.592-51.712 47.616-47.104 40.96q-23.552 18.432-40.448 18.432t-16.896-24.576q2.048-14.336 0.512-35.84t-1.536-36.864q0-17.408-12.288-21.504t-29.696-4.096l-40.96 0-62.464 0q-34.816 0-73.216-0.512t-73.216-0.512l-62.464 0-41.984 0q-8.192 0-17.92-1.536t-17.408-6.656-12.288-14.336-4.608-23.552q0-19.456-0.512-46.08t0.512-47.104q0-27.648 13.312-37.888t43.008-9.216l33.792 0 59.392 0q32.768 0 70.144 0.512t71.168 0.512l61.44 0 38.912 0q25.6 1.024 43.52-4.096t17.92-22.528q0-14.336 1.024-32.256t1.024-32.256q0-23.552 12.8-29.696t32.256 9.216q19.456 16.384 45.568 38.4t52.736 45.056 52.736 45.568 47.616 39.936z"
                        p-id="7079" fill="#ffffff"></path>
                </svg>
                &nbsp;<a onclick="confirm('确认退出登录吗？')?href='../control/doLogin.php?action=logout':''">退出登录</a></button>
EOF;
            }
            ?>

        </div>
        <div class="post_list">
            <?php
            require '../model/topicDao.php';
            $topics = get_user_topics($userId);
            foreach ($topics as $topic) {
                $boardName = $topic['boardName'];
                $title = $topic['title'];
                $content = $topic['content'];
                $publishTime = $topic['publishTime'];
                $likes = $topic['likes'];
                $topicId = $topic['topicId'];
                $replyNumber = $topic['replyNumber'];
                if (!isset($_GET['userId'])) {
                    $editAndDelete = "<button class='edit_post' data-topicId='$topicId'>编辑</button>
                    <button class='delete_post' onclick='window.location.href=\"../control/doDeleteTopic.php?topicId=$topicId\"'>删除</button>";
                }
                echo <<<EOF
                <div class="post" onclick="location.href='./PostDetails.php?topic_id=$topicId'">
                <div class="board_time">
                    <p>$boardName</p>
                    <div>
                        <svg t="1748888557336" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="10587" width="20" height="20">
                            <path
                                d="M857.034752 164.405248C764.735488 72.105984 642.01728 21.274624 511.488 21.274624c-130.531328 0-253.247488 50.83136-345.546752 143.130624S22.810624 379.420672 22.810624 509.952c0 130.52928 50.83136 253.247488 143.130624 345.546752s215.015424 143.130624 345.546752 143.130624c130.52928 0 253.247488-50.83136 345.546752-143.130624S1000.165376 640.48128 1000.165376 509.952c0-130.531328-50.83136-253.247488-143.130624-345.546752zM511.488 953.716736c-244.692992 0-443.764736-199.071744-443.764736-443.764736S266.795008 66.187264 511.488 66.187264 955.252736 265.259008 955.252736 509.952 756.180992 953.716736 511.488 953.716736z"
                                fill="#8a8a8a" p-id="10588"></path>
                            <path d="M500.641792 243.539968h-44.91264v322.17088h322.17088v-44.91264h-277.25824z"
                                fill="#8a8a8a" p-id="10589"></path>
                        </svg>
                        <span>$publishTime</span>
                    </div>
                </div>
                <div class="title">
                    <h3>$title</h3>
                </div>
                <div class="content">
                    <span>$content</span>
                </div>
                <div class="like">
                    <svg t="1748884275265" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8154" width="20" height="20">
                        <path
                            d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z"
                            fill="#2c2c2c" p-id="8155"></path>
                        <path
                            d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z"
                            fill="#2c2c2c" p-id="8156"></path>
                        <path
                            d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z"
                            fill="#2c2c2c" p-id="8157"></path>
                    </svg>
                    <span>$likes</span>
                    <svg t="1748884334622" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="9443" width="20" height="20">
                        <path
                            d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
                            fill="#2c2c2c" p-id="9444"></path>
                    </svg>
                    <span>$replyNumber</span>
                    <div class="editAndDelete">
                        $editAndDelete
                    </div>
                </div>
            </div>

EOF;
            }
            ?>





        </div>

    </div>
    <?php
    $uid = $_SESSION['userid'];
    echo <<<EOF
    <div class="modal" id="editModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">编辑个人资料</h3>
                <button class="close-btn" id="closeModal">&times;</button>
            </div>
            
            <div class="modal-body">
                <form class="edit-form" id="profileForm" type="post" action="edit.php" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="username">昵称</label>
                        <input type="hidden" id="uid" value="$uid">
                        <input type="text" id="username" value="$username">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" value="$password">
                    </div>
                    
                    <div class="form-group">
                        <label>头像</label>
                        <div class="avatar-upload">
                            <div class="avatar-preview" id="avatarPreview">
                                <img src="../image/head/$head" alt="头像预览">
                            </div>
                            <div class="upload-info">
                                <p>点击左侧预览图上传新头像</p>
                                <p class="small" style="font-size: 13px; color: #888;">支持 JPG, PNG 格式，大小不超过 2MB</p>
                                <input type="file" value="$head" id="avatarUpload" accept="image/*" style="display: none;">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>性别</label>
                        <div class="gender-options">
                            <div class="gender-option active" data-value="2">
                                <span>女性</span>
                            </div>
                            <div class="gender-option" data-value="1">
                                <span>男性</span>
                            </div>
                            
                        </div>
                    </div>
                    
                    
                    
                    
                    
                    <div class="btn-group">
                        <button type="submit" class="btn btn-primary">保存更改</button>
                        <button type="button" class="btn btn-outline" id="cancelEdit">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
EOF;
    ?>
    <div class="edit_post_mubu">
        <div class="eidt_post_div">
            <h2>编辑帖子</h2>
            <form action="../control/doEditTopic.php" method="post">
                <label>
                    <p>标题</p>
                    <input type="text" name="title" class="edit_title">
                    <input type="hidden" value="" class="topic_id" name="topicId">
                </label>
                <label>
                    <p>内容</p>
                    <textarea name="content" class="edit_content"></textarea>
                </label>
                <input type="submit" value="发布">
                <input type="button" value="取消" class="close_edit">
            </form>
        </div>
    </div>
</body>
<script>
    let edit_post = document.querySelectorAll('.edit_post');
    let delete_post = document.querySelectorAll('.delete_post');
    let posts = document.querySelectorAll('.post');
    //编辑帖子模态框
    const edit_post_mubu = document.querySelector('.edit_post_mubu');
    const close_edit = document.querySelector('.close_edit');
    edit_post.forEach(function (item, index) {
        item.addEventListener('click', function (event) {
            event.stopPropagation();
            edit_post_mubu.style.display = 'flex';
            let topicId = item.dataset.topicid;
            document.querySelector('.topic_id').value = topicId;
            document.querySelector('.edit_title').value = posts[index].querySelector('.title h3').innerText;
            document.querySelector('.edit_content').value = posts[index].querySelector('.content span').innerText;

            console.log(posts[index].querySelector('.title h3').innerText);
            console.log(posts[index].querySelector('.content span').innerText);
        });
    });
    delete_post.forEach(function (item) {
        item.addEventListener('click', function (event) {
            event.stopPropagation();
        });
    });
</script>
<script>
    // 获取DOM元素
    const editBtn = document.querySelector('.edit_btn');
    const closeBtn = document.getElementById('closeModal');
    const cancelBtn = document.getElementById('cancelEdit');
    const modal = document.getElementById('editModal');
    const profileForm = document.getElementById('profileForm');
    const avatarPreview = document.getElementById('avatarPreview');
    const avatarUpload = document.getElementById('avatarUpload');
    const currentAvatar = document.getElementById('currentAvatar');



    close_edit.addEventListener('click', () => {
        edit_post_mubu.style.display = 'none';
    })
    // 显示模态框
    editBtn.addEventListener('click', () => {
        modal.style.display = 'flex';
    });

    // 关闭模态框
    closeBtn.addEventListener('click', () => {
        modal.style.display = 'none';
    });

    cancelBtn.addEventListener('click', () => {
        modal.style.display = 'none';
    });

    // 点击模态框外部关闭
    window.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.style.display = 'none';
        }
    });

    // 性别选择功能
    document.querySelectorAll('.gender-option').forEach(option => {
        option.addEventListener('click', function () {
            document.querySelectorAll('.gender-option').forEach(el => {
                el.classList.remove('active');
            });
            this.classList.add('active');
        });
    });

    // 头像上传预览
    avatarPreview.addEventListener('click', () => {
        avatarUpload.click();
    });

    avatarUpload.addEventListener('change', function (e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();

            reader.onload = function (e) {
                avatarPreview.querySelector('img').src = e.target.result;
            }

            reader.readAsDataURL(e.target.files[0]);
        }
    });

    // 表单提交处理
    profileForm.addEventListener('submit', function (e) {
        e.preventDefault();

        // 获取表单数据
        const username = document.getElementById('username').value;
        const password = document.getElementById('password').value;
        const gender = document.querySelector('.gender-option.active').dataset.value;
        const newAvatar = avatarPreview.querySelector('img').src.split('/').slice(-1)[0];
        // const user_image=document.querySelector('.user-image').src;
        const uid = document.querySelector('#uid').value;
        const files = avatarUpload.files[0] ? avatarUpload.files[0] : null;
        // 创建 FormData 对象
        let formData = new FormData();
        formData.append('uid', uid);
        formData.append('username', username);
        formData.append('password', password);
        formData.append('gender', gender);
        formData.append('head', decodeURIComponent(newAvatar));
        if (files) {
            formData.append('avatar', files);
        }
        // console.log(formData);
        for (let pair of formData.entries()) {
            console.log(pair[0] + ': ' + pair[1]);
        }
        fetch('../control/doEditUser.php', {
            method: 'POST',

            body: formData,
        }).then(res => {
            return res;
        }).then(data => {
            console.log(data);
            if (data.ok) {
                window.location.reload();
            }
        })


        // 关闭模态框
        modal.style.display = 'none';

    });
</script>

</html>